<template>
	<view>
		<view class="navgator" :style="{'padding-top':statusHeight + 'px'}">
			<image mode="widthFix" src="../../static/f1.png" class="back" @click="backTo"></image>
			<view class="center">
				<label class="title">管理身份钱包</label>
			</view>

		</view>
		<view class="all">
			<view class="top">
				<image src="../../static/img26.jpg" mode="widthFix" class="biao"></image>
				<view class="titleView" @click="toManageIdCard">
					<label class="name">ETH</label>

				</view>
				<image class="rightImg" src="../../static/right.png" mode="widthFix"></image>
			</view>


			<view class="walletView" @click="open">
				<label class="itemTitle">备份钱包</label>

				<image src="../../static/right.png" class="rightImg" mode="widthFix"></image>
			</view>

			<label class="itemTitle" style="margin-left: 20rpx;">备份钱包以便将来恢复身份钱包下的多币种资产</label>
			<view class="addrView">

				<view class="leftbb">
					<label class="itemTitle">添加币种</label>
					<view class="fa1">
						<view class="dot"></view>
						<label class="addr">0xxxxxhygftyyuasdhgas</label>
					</view>
				</view>

				<image class="rightImg" src="../../static/right.png" mode="widthFix"></image>
			</view>

			<view class="exit">退出</view>
		</view>

		<uni-popup ref="popups" type="center" background-color="#fff">
			<view class="plan">
				<h4 class="planName">请输入密码</h4>
				<input class="userNameIn" />
				<view class="btnClass">
					<view class="btn rightBorder" @click="close">取消</view>
					<view class="btn ">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Navgator from '../../componts/navgator.vue'
	export default {
		components: {
			Navgator
		},
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad(options) {


		},
		methods: {
			backTo() {
				this.Api.back()
			},

			open() {
				this.$refs.popups.open()
			},
			close() {
				this.$refs.popups.close()
			},
			toManageIdCard() {
				this.Api.go_to('/pages/managerIdCard/managerIdCard')
			}
		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight+20 || 10; //如果没有获取到高度，那么指定10px；
			}
		}
	}
</script>

<style scoped>
	.navgator {
		background-color: #F7F7F7;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		height: 120rpx;
		padding: 40rpx 40rpx;
		border-bottom: 1rpx #F3F3F3 solid;

	}

	.back {
		width: 40rpx;
	}


	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: -40rpx;

	}

	.title {
		font-size: 40rpx;
		font-weight: 500;
	}

	.all {
		background-color: #F7F7F7;
		height: 100vh;
	}

	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
		justify-content: space-between;
		border-bottom: 1px #DFDEE1 solid;
	}

	.biao {
		width: 80rpx;
	}

	.titleView {
		display: flex;
		justify-content: center;
		margin-left: 20rpx;
		flex-direction: column;
		background-color: white;

		flex: 1;
	}

	.name {
		font-size: 30rpx;

	}

	.tip {
		color: #AFAFAF;
		font-size: 20rpx;
	}

	.rightImg {
		width: 32rpx;
	}

	.addrView {
		background-color: white;
		display: flex;
		flex-direction: row;
		padding: 20rpx;

		margin-top: 20rpx;
		align-items: center;
		justify-content: space-between;

	}

	.itemTitle {
		font-size: 30rpx;
	}

	.addr {
		font-size: 20rpx;
		color: #AFAFAF;
	}

	.walletView {
		background-color: white;
		padding: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.user {
		flex: 1;
		text-align: right;
		font-size: 20rpx;
		color: #AFAFAF;
		margin-right: 30rpx;
	}

	.plan {
		height: 300rpx;
		display: flex;
		width: 80vw;
		flex-direction: column;
		border-radius: 30rpx;
		align-items: center;
		position: relative;

	}

	.planName {
		margin-top: 20rpx;
	}

	.userNameIn {
		width: 90%;
		height: 80rpx;
		margin-top: 40rpx;
		border: 1px #F0F0F0 solid;
	}

	.btnClass {
		width: 100%;
		border-top: 1px #F0F0F0 solid;
		display: flex;
		margin-top: 50rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
	}

	.btn {
		color: #047EEC;
		width: 50%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.rightBorder {
		border-right: 1px #F0F0F0 solid;
	}

	.dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		background-color: red;
	}

	.fa1 {
		display: flex;
		align-items: center;

		flex-direction: row;
	}
	.leftbb{
		flex: 1;
	}
	.exit{
		width: 100%;
		background-color: #FFF;
		color: #D82F22;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		padding: 25rpx 0;
	}
</style>
